<template>
  <section class="area-info">
    <DivShell title="区域信息">
      <div class="container">
        <!-- <div class="area-info-echart" id="area-info-echart"></div> -->
        <div>
          <label>小区</label>
          <div :style="`width:${(communityData.aoiStatist.community/maxInfoNum)*260*desgin1pxToCilent}px`"></div>
          <span >{{communityData.aoiStatist.community}}</span>
        </div>
        <div>
          <label>道路街巷</label>
          <div :style="`width:${(communityData.aoiStatist.road/maxInfoNum)*260*desgin1pxToCilent}px`"></div>
          <span >{{communityData.aoiStatist.road}}</span>
        </div>
        <div>
          <label>标注物</label>
          <div :style="`width:${(communityData.aoiStatist.mark/maxInfoNum)*260*desgin1pxToCilent}px`"></div>
          <span >{{communityData.aoiStatist.mark}}</span>
        </div>
        <div>
          <label>网格</label>
          <div :style="`width:${(communityData.aoiStatist.grid/maxInfoNum)*260*desgin1pxToCilent}px`"></div>
          <span >{{communityData.aoiStatist.grid}}</span>
        </div>
      </div>
    </DivShell>
  </section>
</template>

<script>
import { mapGetters } from 'vuex'
import DivShell from '@src/components/divShell.vue'
export default {
  name: "AreaInfo",
  components:{
    DivShell
  },
  props: {
    title:{
      type: String,
      default:'丰图精准决策数字底板'
    }
  },
  data() {
    return {
      maxInfoNum:null,
    };
  },
  computed: {
    ...mapGetters(['communityData']),
  },
  watch:{
    	communityData: {
				handler(cval, oval) {
          this.getMaxInfoNum();
				},
				deep: true
			}
  },
  mounted() {
    this.getMaxInfoNum();
  },
  methods: {
    getMaxInfoNum(){
      var arr =[this.communityData.aoiStatist.community,this.communityData.aoiStatist.road,this.communityData.aoiStatist.mark,this.communityData.aoiStatist.grid]
      this.maxInfoNum=Math.max.apply(null,arr);
    }
  },
  beforeDestroy() {
      
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .area-info{
    margin-bottom: 18px;
    & .container{
      &>div{
        height: 30px;
        line-height: 30px;
        display: flex;
        align-items: center;
        &>label{
          font-size: 14px;
          color: #707DA4;
          width: 60px;
          text-align: right;
          margin-right: 8px;
        }
        &>div{
          width: 0px;
          height: 5px;
          background-color: #307fff;
          margin-right: 6px;
          display: flex;
          align-items: center;
          transition: all .5s;
        }
        &>span{
          font-size: 16px;
          color: #9CA7C7;
        }
      }
    }
  }
</style>
